<template>
	<view style="margin: 0 30rpx;">
		<view class="b_div">
			<view :style="{backgroundImage:'url(' + testInfo.imageUrl + ')'}"></view>
		</view>
		
		<view class="top"></view>
		
		<view class="d1">
			<image :src="testInfo.imageUrl" mode=""></image>
			<view>
				<text class="title">{{testInfo.title}}</text>
				<view>
					<text class="test">推荐测试人群：{{testInfo.crowd}}</text>
					<view class="pingf1">
						<view>
							<text class="iconfont">&#xe600;</text>
							<text class="iconfont">&#xe600;</text>
							<text class="iconfont">&#xe600;</text>
							<text class="iconfont">&#xe600;</text>
							<text class="iconfont">&#xe600;</text>
						</view>
						<view :style="{width:pfwid(this.testInfo.score)}">
							<text class="iconfont">&#xe600;</text>
							<text class="iconfont">&#xe600;</text>
							<text class="iconfont">&#xe600;</text>
							<text class="iconfont">&#xe600;</text>
							<text class="iconfont">&#xe600;</text>
						</view>
						<text class="pfint">{{testInfo.score}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tagD">
			<text class="tag" v-for="item in tag">{{item}}</text>
			
			<view class="tagDv1">
				<text>{{testInfo.commentCounts || 0}}条评论</text>
				<text>{{testInfo.participants || 0}}人参与</text>
			</view>
		</view>
		
		<text class="info">{{testInfo.introduction}}</text>
		
		
		<view class="titleD">
			<text></text>
			<text>测试简介</text>
		</view>
		<view>{{testInfo.content}}</view>
		<text class="fenge"></text>
		<view class="titleD">
			<text></text>
			<text>用户体验评价</text>
		</view>
		
		
		<view style="margin-bottom: 120rpx;">
			<view class="list" v-for="item in list">
				<view class="list-top">
					<image :src="item.img"></image>
					<view>
						<text>{{item.name}}</text>
						<view class="pingf1">
							<view>
								<text class="iconfont">&#xe600;</text>
								<text class="iconfont">&#xe600;</text>
								<text class="iconfont">&#xe600;</text>
								<text class="iconfont">&#xe600;</text>
								<text class="iconfont">&#xe600;</text>
							</view>
							<view :style="{width:pfwid(item.pf)}">
								<text class="iconfont">&#xe600;</text>
								<text class="iconfont">&#xe600;</text>
								<text class="iconfont">&#xe600;</text>
								<text class="iconfont">&#xe600;</text>
								<text class="iconfont">&#xe600;</text>
							</view>
						</view>
					</view>
					<text class="time">{{ustime(item.time)}}</text>
				</view>
				<text class="list-info">{{item.info}}</text>
			</view>
		</view>
		
		<view class="bottom">
			<view @tap="kefutap">
				<image src="../../static/icon/cxzczxca.png" mode=""></image>
				<text>客服</text>
			</view>
			<view @tap="fenxiang">
				<image src="../../static/icon/adsad.png" mode=""></image>
				<text>分享</text>
			</view>
			<view>
				<image src="../../static/icon/cxzdad.png" mode=""></image>
				<text>收藏</text>
			</view>
			<!-- <text class="btns" v-if="testInfo.userTestStatus === 1" @click="getClassBuy">￥{{testInfo.price}}/次</text> -->
			<text class="btns" v-if=" 2" @click="getTest">开始评测</text>
			<!-- <text class="btns" v-if="testInfo.userTestStatus === 3" @click="getClassBuy">查看报告</text> -->
		</view>
		
		<view class="kefu" v-if="kefu">
			<view>
				<text class="kefut">客服微信</text>
				<image class="erweima" src="../../static/icon/cxzczxc.png" mode=""></image>
				<text class="kefuinf">长按添加客服微信</text>
			</view>
			<image src="../../static/icon/close.png" mode="" @tap="kefu=false"></image>
		</view>
		<view class="zhifu" v-if="zhifu">
			<text class="b"  @click="zhifu = false"></text>
			<view>
				<text class="yhj_t">使用优惠券</text>
				<text class="coupon">你有{{coupon}}张优惠券，使用后可免费测试，是否使用</text>
				<view class="btns">
					<text @click="zhifu = false">取消</text>
					<text @click="zhifu = false">使用</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				testInfo: {},
				tag:['艺术','精神','内心世界'],
				coupon:0,
				list:[
					{
						img:'http://www.weimeicun.com/uploads/allimg/180620/1009-1P620212R1419.jpg',
						name:'小猫与蝴蝶结🎀',
						pf:'3.0',
						info:'不错，没想到我居然是莫扎特！哈哈哈哈！！',
						time:1637325790
					},
					{
						img:'https://i02piccdn.sogoucdn.com/ffd105e64ff5215c',
						name:'梓呀紫',
						pf:'3.5',
						info:'不错，没想到我居然是莫扎特！哈哈哈哈！！',
						time:1637325790
					}
				],
				kefu:false,
				zhifu:false,
				testId: null,
			}
		},
		computed:{
			pfwid(){
				return (e)=>{
					return 200 * (Number(e) * 2 / 10 ) + 'rpx';
				}
			}
		},
		onLoad(options) {
			this.testId = options.testId;
			this.getInfo(options.testId);
		},
		methods: {
			ustime(time){
				var timestamp = Date.parse(new Date()) / 1000
				
				let cz = timestamp - time;
				var crtTime = new Date(time * 1000);
				if(cz < 60){
					return '刚刚'
				}else if(cz < 3600){
					return parseInt(cz / 60) + '分钟前';
				}else if (cz < 86400){
					return this.gettime('hh:mm',crtTime);
				}else if(cz < 31536000){
					return this.gettime('MM-dd',crtTime);
				}else{
					return this.gettime('yyyy-MM-dd hh:mm',crtTime);
				}
			},
			gettime(fmt,date){
				if (fmt == null) fmt = 'yyyy-MM-dd hh:mm:ss'
				var o = {
					"M+" : date.getMonth()+1,     //月份 
					"d+" : date.getDate(),     //日 
					"h+" : date.getHours(),     //小时 
					"m+" : date.getMinutes(),     //分 
					"s+" : date.getSeconds(),     //秒 
					"q+" : Math.floor((date.getMonth()+3)/3), //季度 
					"S" : date.getMilliseconds()    //毫秒 
				}; 
				if(/(y+)/.test(fmt))
				fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
				for(var k in o)
				if(new RegExp("("+ k +")").test(fmt)) 
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
				return fmt; 
			},
			kefutap(){
				this.kefu = true
			},
			fenxiang(){
				uni.showActionSheet({
				    itemList: ['分享海报', '分享链接'],
				    success: function (res) {
				        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				    }
				});
			},
			// 获取详情
			getInfo: function(id) {
				uni.showLoading();
				this.$api.getTestInfo({testId: id, userId: uni.getStorageSync('userInfo').id}).then(
					(res) => {
						if (res?.code === '200') {
							console.log(res.data, 're')
							this.testInfo = res?.data
						}
					}
				)
				.finally(() => {
					uni.hideLoading();
				})
			},
			// 支付
			getClassBuy: function() {
				if (this.coupon > 0) {
					this.zhifu = true
				}else {
					uni.showLoading();
					let that = this
					this.$api.payClass({testId: this.testId, tradeType: 1, userId: uni.getStorageSync('userInfo').id}).then(
						(res) => {
							if (res?.code === '200' && res?.data?.appId) {
								uni.requestPayment({
								    provider: 'wxpay',
								    timeStamp: res?.data?.timeStamp,
								    nonceStr: res?.data?.nonce_str,
								    package: `prepay_id=${res?.data?.prepay_id}`,
								    signType: 'MD5',
								    paySign: res?.data?.paySign,
								    success: function (res) {
										console.log(res, 'ress')
										uni.showToast({
											title:"支付成功"
										});
										that.getInfo(that.testId);
								    },
								    fail: function (err) {
										console.log(err, 'err')
								        console.log('fail:' + JSON.stringify(err));
								    }
								});
							}
						}
					)
					.finally(() => {
						uni.hideLoading();
					})
				}
			},
			// 开始测评
			getTest: function() {
				uni.navigateTo({
					url: `../TestItem/TestItem?options=${JSON.stringify(this.testInfo?.subjects)}`,
					fail(err) {
						console.log(err, 'err')
					}
				})
			}
		}
	}
</script>

<style>
	body{
		font-family: PingFangSC-Semibold, PingFang SC;
	}
	.iconfont{
		font-family: 'iconfont' !important;
	}
	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_2951928_tihan4sgj4.ttf?t=1637323945958');
	}
	.zhifu{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.zhifu .b{
		background-color: rgba(0,0,0,.5);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}
	.zhifu>view{
		width: 560rpx;
		height: 346rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
	}
	.zhifu .yhj_t{
		font-size: 18px;
		font-weight: 600;
		margin: 40rpx 0 24rpx;
		display: block;
		text-align: center;
	}
	.zhifu .coupon{
		margin: 0 40rpx;
		opacity: .6;
		font-size: 14px;
		display: block;
	}
	.zhifu .btns{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		margin: 40rpx;
		margin-bottom: 0;
	}
	.zhifu .btns>text{
		width: 228rpx;
		height: 72rpx;
		display: block;
		text-align: center;
		line-height: 72rpx;
		font-size: 16px;
		font-weight: 500;
		border-radius: 36rpx;
	}
	.zhifu .btns>text:nth-child(1){
		color: #F15E35;
		border: 1px solid #F15E35;;
	}
	.zhifu .btns>text:nth-child(2){
		color: #FFFFFF;
		background: linear-gradient(90deg, #F99333 0%, #F15F35 100%);
	}
	.kefu{
		background-color: rgba(0,0,0,.5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.kefu>image{
		width: 60rpx;
		height: 60rpx;
		margin-top: 40rpx;
	}
	.kefu>view{
		width: 560rpx;
		height: 546rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}
	.kefu .kefut{
		font-size: 18px;
		font-weight: 600;
		display: block;
		margin: 40rpx 0 32rpx 0;
		text-align: center;
	}
	.kefu .erweima{
		width: 318rpx;
		height: 320rpx;
	}
	.kefu .kefuinf{
		font-size: 14px;
		margin: 24rpx 0 40rpx 0;
		opacity: .6;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 22rpx 46rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
		box-shadow: 0px -4px 30px 0px rgba(0, 0, 0, 0.05);
	}
	.bottom>view{
		display: flex;
		flex-direction: column;
		margin-right: 44rpx;
	}
	.bottom>view>image{
		width: 44rpx;
		height: 44rpx;
		margin-bottom: 4rpx;
	}
	.bottom>view>text{
		font-size: 12px;
		display: block;
	}
	.bottom .btns{
		height: 80rpx;
		background: linear-gradient(90deg, #F99333 0%, #F15F35 100%);
		border-radius: 40rpx;
		font-size: 18px;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 50rpx;
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
	}
	.list{
		padding: 40rpx 0;
		border-bottom: 1rpx solid rgba(0,0,0,.1);
	}
	.list-top{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.list-top>image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 100px;
		margin-right: 16rpx;
	}
	.list-top>view{
		display: flex;
		flex: 1;
		flex-direction: column;
	}
	.list-top>view>text:nth-child(1){
		font-size: 16px;
		opacity: .8;
		font-weight: 600;
	}
	.list-top .time{
		font-size: 12px;
		opacity: .4;
	}
	.list-info{
		font-size: 14px;
		opacity: .8;
		margin-left: 96rpx;
		margin-top: 16rpx;
	}
	.fenge{
		height: 20rpx;
		background: #F7F7F7;
		display: block;
		margin-top: 20rpx;
	}
	.titleD{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 32rpx 0;
	}
	.titleD>text:nth-child(1){
		width: 8rpx;
		height: 36rpx;
		background: linear-gradient(90deg, #F99333 0%, #F15F35 100%);
		border-radius: 40rpx;
	}
	.titleD>text:nth-child(2){
		font-size: 16px;
		font-weight: 600;
		margin-left: 16rpx;
	}
	.info{
		background: #F7F7F7;
		border-radius: 16rpx;
		padding: 24rpx;
		display: block;
		font-size: 14px;
		color: rgba(0,0,0,.6);
		margin-top: 28rpx;
	}
	.tagD{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 36rpx;
	}
	.tagD .tag{
		font-size: 14px;
		border: 3rpx solid #F15F35;
		border-radius: 8rpx;
		padding: 0 10rpx;
		color: #F15F35;
		margin-right: 16rpx;
	}
	.tagDv1{
		display: flex;
		flex: 1;
		justify-content: flex-end;
	}
	.tagDv1>text{
		opacity: .4;
		font-size: 12px;
		margin-left: 24rpx;
	}
	.pingf1{
		position: relative;
		height: 40rpx;
		display: block;
		width: 200rpx;
	}
	.pingf1>view{
		position: absolute;
		left: 0;
		top: 0;
		overflow: hidden;
		width: 200rpx;
	}
	.pingf1>view:nth-child(1){
		width: 200rpx;
	}
	.pingf1>view>text{
		font-size: 17px;
		margin-right: 6rpx;
		color: #CCCCCC;
	}
	.pingf1>view:nth-child(2)>text{
		color: #F15F35;
	}
	.pingf1 .pfint{
		margin-left: 220rpx;
		color: #F15F35;
		font-size: 14px;
		font-weight: 600;
	}
	.d1{
		display: flex;
		flex-direction: row;
		margin-top: 146rpx;
	}
	.d1>image{
		width: 256rpx;
		height: 256rpx;
		border-radius: 20rpx;
	}
	.d1>view{
		display: flex;
		flex: 1;
		margin: 0 24rpx;
		flex-direction: column;
		justify-content: space-between;
	}
	.d1 .title{
		font-size: 20px;
		font-weight: 600;
		color: #FFFFFF;
	}
	.d1 .test{
		font-size: 14px;
		opacity: .6;
	}
	.top{
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		position: absolute;
		top: 280rpx;
		left: 0;
		right: 0;
		height: 120rpx;
		z-index: -1;
	}
	
	.b_div {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 324rpx;
		z-index: -2;
		overflow: hidden;
		background-color: rgba(0,0,0,.4);
	}
	.b_div>view {
		overflow: hidden;
		position: relative;
		z-index: -1;
		width: 100vw;
		height: 100%;
		background-repeat: no-repeat;
		background-position: 50%;
		background-size: 100% auto;
		opacity: .3;
		filter: url(data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><f…ter id="filter"><feGaussianBlur stdDeviation="20" /></filter></svg>#filter);
		filter: blur(8px);
		-webkit-filter: blur(8px);
		transform-origin: center center;
		-webkit-transform-origin: center center;
		content: "viewport-units-buggyfill; width: 100vw; filter: blur(2.667vw); -webkit-filter: blur(2.667vw)";
	}
</style>
